<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>


<div class="layui-fluid" id="app" style="margin-top: 0px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">


            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">图片</li>
                    <li>添加图片</li>

                </ul>
                <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">

                    <div class="layui-tab-item layui-show">
                        <div class="layadmin-trailer ">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <!--<th>#ID</th>-->
                                    <!--<th style="width: 30%;">案例名称</th>-->
                                    <th>描述</th>
                                    <!--&lt;!&ndash;<th>创建时间</th>&ndash;&gt;-->
                                    <th>图片</th>
                                    <!--<th>参数</th>-->
                                    <!--<th>状态</th>-->
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in items" :data_id="item.id">
                                    <!--<td>{{item.cases_name}}</td>-->
                                    <td>{{item.cases_detail}}</td>
                                    <td>
                                        <img class="layui-upload-img" style="width: 180px;height: 60px; object-fit: cover;" :src="item.src">
                                        <!--{{item.src}}-->

                                    </td>
                                    <td style="text-align: center">

                                        <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    onclick="del(this)"    :data_id="item.id" :data_index="index">删除
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>



                    <div class="layui-tab-item ">
                        <form class="layui-form" action="" lay-filter="component-form-group">
                            <!--<div class="layui-card-header">表单组合</div>-->

                            <input type="hidden" name="cases_id" value="">
                            <!--<div class="layui-form-item">-->
                            <!--<label class="layui-form-label">案例名称</label>-->
                            <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="cases_name" lay-verify="required"-->
                            <!--autocomplete="off"-->
                            <!--placeholder="请输入"-->
                            <!--class="layui-input">-->
                            <!--</div>-->
                            <!--</div>-->

                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cases_detail" lay-verify="required"
                                           autocomplete="off"
                                           placeholder="请输入"
                                           class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>
                                <div class="layui-input-inline " style="width: auto;">
                                    <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                                        <img class="layui-upload-img" style="width: auto;height: 120px; object-fit: cover;" src="/res/img/thumb.png">
                                        <input type="hidden" name="cases_img" value="" >
                                    </div>
                                </div>
                            </div>


                            <div class="layui-card-footer form-footer2">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <div class="layui-footer">
                                            <button class="layui-btn" lay-submit=""
                                                    lay-filter="component-form-demo1">添加
                                            </button>
                                            <!--<button type="reset" class="layui-btn layui-btn-primary">重置-->
                                            <!--</button>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //vue对象
    var app = new Vue({
        el: '#app',
        data: {
            check: [],
            curr: 1,//当前页
            limit: 10,//当前页
            items: parent.content
        }
    });

    function del(that) {
        //var id=$(that).attr('data_id');
        var index = parent.layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("pic_del")}', function (res) {
                parent.layer.close(index);
                if (res.code == 1) {
                    init();
                }

            });
        }, function () {
            parent.layer.close(index);
        });
    }


    //按需引入layui模块
    layui.use(['laypage', 'layer', 'table', 'element','upload'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;


        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            //var data_id = $(that).attr('data_id');
//            $.post("{:url('add_cases_detail')}", data.field, function (res) {
//                if (res.code == 1) {
//                    layer.msg(res.msg, {icon: 1})
//                    return false;
//                } else {
//                    layer.msg(res.msg, {icon: 2})
//                    return false;
//                }
//            });
            var src= $('#pic1 img').attr('src');
            console.log(src);
            data.field['src']=src;

            parent.content.push(data.field);
            layer.msg('添加成功', {icon: 1})
            app.items=parent.content;
            $('.layui-form')[0].reset();
            var pic='/res/img/thumb.png';
            $('#pic1 img').attr('src', pic);
            return false;
        });

        //拖拽上传
        upload.render({
            elem: '#pic1'
            ,url: '/tool/qiniu/upload'
            ,before:function () {
                layer.load(2);
            }
            ,done: function(res){
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src',res.data.url);
                $('#pic1 input').val(res.data.pic);
            }
        });



    });


</script>


</body>
</html>




